<!-- 
@name: 积分红包
-->
<template>
	<div id="BankingBusinessList" class="page">
		<!-- <van-tabs v-model="searchData.status" color='#FFCE17' @click="onClick">
			<van-tab title="未使用" name="0"></van-tab>
			<van-tab title="已使用" name="1"></van-tab>
		</van-tabs> -->
		<!-- <div class="content-wrap">
			<div class="diy-area">
				<div class="like">
					<div class="type2" v-if="listModel" ref='type2Scorll' id='type2Scorll'>
						<van-list v-model="loading" offset='0' :finished="finished" finished-text="" @load="onLoad">
							<div :class="goodsItem.status != 'INIT'?'itemImg_yes':'itemImg_not'" class="item flex-between flex-center" v-for="(goodsItem, goodsIndex) in likeList" :key="goodsIndex">
								<div style="width:4rem">
									<div class="text1">{{goodsItem.pv}}<span class="text2">积分</span> </div>
								</div>
								<van-button class="button" @click="revRed_centre(goodsItem)">{{goodsItem.status== "INIT"?'领取':'已领取'}}</van-button>

							</div>
						</van-list>

					</div>
				</div>
			</div>
		</div> -->
		<div class="page">
			<div class="content">
				<div class="coupon" v-for="(item, index) in likeList" :key="index">
					<!-- <div v-if="!item.canUse" class="whitebg"></div> -->
					<div class="couponContent flex-row">
						<div class="coupon-left flex-center">
							<p style="font-size:0.3rem">￥</p>{{item.couponEntity.sub}}
						</div>
						<div class="coupon-right">
							<div class="text1 flex-row flex-alignCenter">
								<img class="hg" src='@/assets/images/vip.png'></img>
								{{item.couponEntity.name}}
							</div>
							<div class="text2" v-if="item.couponEntity.full">满{{item.couponEntity.full}}减{{item.couponEntity.sub}}</div>
							<div class="text2" v-if="!item.couponEntity.full">无门槛</div>
							<div class="expireTime">有效期至{{item.couponEntity.endTime}}</div>
							<div class="use flex-center" @click="selectCoupon(item)" v-if="item.canUse">
								选择
							</div>

						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			searchValue: '',
			searchTypeIndex: '',
			getGtypeList: [],
			listModel: true, //true 列表模式 false 大图模式
			searchTypeList: [
				{ value: '销量最高', pkey: 'XS' },
				{ value: '距离最近', pkey: 'NEAR' },
				{ value: '评分最高', pkey: 'RATE' },
			],
			searchData: {
				// page: 0,
				// pagesize: 9999,
				// status: '0', //INIT(0, "初始"),PAID(1, "已领取"),
			},
			likeList: [],
			activeName: '',
			loading: false,
			finished: false,
		};
	},

	created() {
		if (this.$route.query.pkey) {
			//跳转过来的分类pkey
			this.activeName = Number(this.$route.query.pkey);
		}
		if (this.$route.query.amt) {
			//跳转过来的金额
			this.searchData.amt = this.$route.query.amt;
		}
		this.getData();
		// this.getGtype_goods();
	},
	methods: {
		selectCoupon(item) {
			this.$router.push({
				path: '/coupon/confirmOrder',
				query: {
					pkey: this.$route.query.pkey,
					couponNum: this.$route.query.couponNum,
					payType: this.$route.query.payType,
					goodsPa: this.$route.query.goodsPa,
					referrer: this.$route.query.referrer,
					couponMember: JSON.stringify({
						pkey: item.pkey,
						full: item.couponEntity.full,
						sub: item.couponEntity.sub,
					}),
				},
			});
		},
		//切换标签
		onClick() {
			this.clearSearch();
			this.finished = true;
			this.getData(true);
		},
		get_member() {
			var params = {};
			this.$myApi.get_member(params).then((res) => {
				if (res.code == 0) {
					this.$store.dispatch('SET_USERINFO', res.result);
				} else {
				}
			});
		},
		revRed_centre(item) {
			if (item.status != 'INIT') {
				return;
			}
			var params = {
				pkey: item.pkey,
			};
			this.$myApi.revRed_centre(params).then((res) => {
				if (res.code == 0) {
					this.$notify({ type: 'success', message: '领取成功' });
					this.onClick();
					this.get_member();
				} else {
				}
			});
		},
		sortChange(pkey) {
			this.searchData.sortType = pkey;
			this.clearSearch();
			this.finished = true;
			this.getData(true);
		},
		onLoad() {
			console.log('触底');
			this.getData();
		},
		onClick() {
			this.clearSearch();
			this.finished = true;
			this.getData(true);
		},
		getGtype_goods() {
			this.$myApi.getGtype_goods().then((res) => {
				if (res.code == 0) {
					var arr = [{ name: '全部', pkey: '' }, ...res.result];
					this.getGtypeList = arr;
				} else {
				}
			});
		},
		getData(finished) {
			// finished 避免清空列表出发刷新
			var params = this.searchData;
			// params.gtype = this.activeName;
			this.$myApi.query_coupon(params).then((res) => {
				if (res.code == 0) {
					this.likeList = [...this.likeList, ...res.result];
					this.loading = false;
					this.searchData.page++;
					if (finished) {
						this.finished = false;
					}
					if (true) {
						//此接口没有分页
						this.finished = true;
					}
					// if (res.result.length < this.searchData.pagesize) {
					// 	this.finished = true;
					// }
				} else {
				}
			});
		},
		clearSearch() {
			this.likeList = [];
			this.searchData.page = 0;
			this.searchData.pagesize = 5;
			this.finished = false;
		},
		onSearch(e) {
			console.log(e);
			this.clearSearch();
			this.searchData.title = e;
			this.finished = true;
			this.getData(true);
		},
		onCancel() {},
	},
};
</script>
<style lang="less" scoped>
#BankingBusinessList {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;
	padding-bottom: 0;
	/* pages/coupon/coupon.wxss */
	.content {
		padding: 0.4rem;
		position: relative;
	}

	.coupon {
		width: 100%;
		height: 2rem;
		background: #fff;
		border-radius: 10px;
		position: relative;
		margin-top: 0.3rem;
	}

	.couponContent {
		width: 100%;
		height: 100%;
		border-radius: 10px;
		// overflow: hidden;
		background-color: #ffffff;
	}

	.whitebg {
		background-color: #fff;
		opacity: 0.6;
		z-index: 9999;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: -1px;
	}

	.coupon-left {
		width: 2rem;
		height: 100%;
		background: #eca73b;
		font-size: 0.5rem;
		color: #fff7f7;
		border-radius: 10px 0 0 10px;
	}

	.coupon-right {
		width: calc(100% - 2rem);
		height: 100%;
		background: #fff;
		/* background: rgba(253, 247, 246, 1); */
		border: 1px solid rgba(244, 233, 234, 1);
		padding: 0.2rem;
		border-radius: 0px 10px 10px 0px;
	}

	.text1 {
		width: 100%;
		font-size: 0.4rem;
		color: #000000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.ygq {
		width: 90px;
		height: 68px;
		position: absolute;
		right: 24px;
		top: 23px;
	}

	.hg {
		margin-right: 6px;
		height: 0.34rem;
		// width:0.34rem
	}

	.expireTime {
		font-size: 0.24rem;
		color: #3f3f3f;
		margin-top: 0.1rem;
	}
	.text2 {
		width: 100%;
		font-size: 0.24rem;
		color: #3f3f3f;
		margin-top: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.text4 {
		font-size: 20px;
		color: #999999;
	}

	.text3 {
		font-size: 20px;
		color: #ff0813;
	}

	.use {
		width: 1rem;
		height: 0.4rem;
		background: linear-gradient(0deg, #ea423a 0%, #f36451 100%);
		border-radius: 26px;
		font-size: 0.22rem;
		color: #fff;
		position: absolute;
		right: 0.1rem;
		bottom: 0.3rem;
	}
}
</style>
<style lang="less" scoped>
/deep/.van-search .van-cell {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	font-size: 0.28rem;
}
/deep/.van-tab {
	// flex: 0 1 auto;
	// width: 1rem;
	font-size: 0.3rem;
}
/deep/.van-tab--active {
	font-weight: bold;
	font-size: 0.32rem;
}
</style>